<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页内容</title>
</head>
<body>
<script th:src="@{vue.js}"></script>
<script th:src="@{element-ui.js}"></script>
<script th:src="@{axios.js}"></script>
<link th:href="@{element-ui.css}" rel="stylesheet"></link>

<div id="app">
    <el-button type="primary" @click="openDialog">创建连接</el-button>
    <el-button type="success" @click="viewConnectInfo">连接信息</el-button>

    <!-- 分割线-->
    <el-divider></el-divider>

    <!-- 查询内容 -->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="测点名称">
            <el-input v-model="search.tagName" placeholder="请输入测点"></el-input>
        </el-form-item>

        <el-form-item label="开始时间">
            <el-date-picker
                    v-model="search.startDate"
                    type="datetime"
                    placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间">
            <el-date-picker
                    v-model="search.endDate"
                    type="datetime"
                    placeholder="选择结束时间" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </el-form-item>


        <!--<el-form-item label="测量间隔">-->
        <!--<el-input v-model="search.interval" placeholder="请输入间隔"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="请输入间隔单位">-->
        <!--<el-select v-model="search.intervalUnit" placeholder="请输入间隔单位">-->
        <!--<el-option label="小时" value="h"></el-option>-->
        <!--<el-option label="分钟" value="m"></el-option>-->
        <!--<el-option label="秒" value="s"></el-option>-->
        <!--</el-select>-->
        <!--</el-form-item>-->
        <!-- 搜索按钮-->
        <el-button type="primary" round @click="doSearch">搜索</el-button>
        <el-button type="primary" round @click="resetList">重置</el-button>
        <el-button type="primary" round @click="addExcleList">加入导出列表</el-button>
        <el-button type="primary" round @click="openExportDialog">导出</el-button>
    </el-form>

    <!-- 查询出来的具体的数据内容-->
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="time"
                label="时间"
                width="240">
        </el-table-column>
        <el-table-column
                prop="value"
                label="值"
                width="240">
        </el-table-column>
    </el-table>
    <el-pagination
            layout="prev, pager, next"
            :total="total" :page-size="search.limit" :current-page="search.offset" background
            @current-change="pageChange">
    </el-pagination>

    <!-- 创建连接的对话框-->
    <el-dialog
            title="创建连接"
            :visible.sync="dialogVisible"
            width="50%">
        <el-form :model="form">
            <el-form-item label="ip地址">
                <el-input v-model="form.ip" autocomplete="off" placeholder="ip地址为必填项"></el-input>
            </el-form-item>
            <el-form-item label="port号">
                <el-input v-model="form.port" autocomplete="off" placeholder="端口号为必填项(8086)"></el-input>
            </el-form-item>
            <el-form-item label="数据库名称">
                <el-input v-model="form.database" autocomplete="off" placeholder="数据库名称为必填项"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="form.username" autocomplete="off" placeholder="未设置账号可以不填"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" autocomplete="off" placeholder="未设置密码可以不填"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="connectInFluxdb">确 定</el-button>
  </span>
    </el-dialog>

    <!-- 连接信息-->
    <el-dialog
            title="连接信息"
            :visible.sync="connectFlag"
            width="50%">
        <el-form>
            <el-button type="primary" @click="resetConnect">重新连接</el-button>
            <el-form-item label="ip地址">
                <el-input v-model="connectInfo.ip" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="port号">
                <el-input v-model="connectInfo.port" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="数据库名称">
                <el-input v-model="connectInfo.database" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="连接标示">
                <el-input v-model="connectInfo.key" autocomplete="off" disabled></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="connectFlag = false">确 定</el-button>
  </span>
    </el-dialog>

    <!--导出弹出层-->
    <el-dialog
            title="导出"
            :visible.sync="exportFlag"
            width="50%">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="开始时间">
                <el-date-picker
                        v-model="excleParam.startDate"
                        type="datetime"
                        placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
                <el-date-picker
                        v-model="excleParam.endDate"
                        type="datetime"
                        placeholder="选择结束时间" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="测量间隔">
                <el-input v-model="excleParam.interval" placeholder="请输入间隔"></el-input>
            </el-form-item>
            <el-form-item label="请输入间隔单位">
                <el-select v-model="excleParam.intervalUnit" placeholder="请输入间隔单位">
                    <el-option label="小时" value="h"></el-option>
                    <el-option label="分钟" value="m"></el-option>
                    <el-option label="秒" value="s"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <!-- 循环出需要导出的表的内容-->
        <el-tag
                v-for="(tag,index) in excleList"
                :key="tag"
                closable @close="delItem(index,tag)"
        >
            {{tag}}
        </el-tag>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="exportOk">确 定</el-button>
  </span>
    </el-dialog>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                dialogVisible: false,
                form: {
                    ip: "",
                    port: "",
                    username: "",
                    password: "",
                    database: ""
                },
                connectInfo: {
                    key: "",
                    ip: "",
                    port: "",
                    database: "",
                },
                connectFlag: false,
                search: {
                    tagName: "",
                    startDate: "",
                    endDate: '',
                    limit: 10,
                    offset: 1
                },
                tableData: [],
                total: 0,
                // 带导出的measurements列表
                excleList: [],
                exportFlag: false,
                excleParam: {
                    startDate: '',
                    endDate: '',
                    interval: '',
                    intervalUnit: ''
                }
            }
        },
        methods: {
            // 打开连接的对话框
            openDialog() {
                this.dialogVisible = true
            },
            // 尝试进行连接请求
            connectInFluxdb() {
                axios.post('/connect', this.form).then(res => {
                        if (res.data.success) {
                            this.$message.success('连接成功')
                            // 下面保存属性内容
                            this.connectInfo.key = res.data.data
                            this.connectInfo.ip = this.form.ip
                            this.connectInfo.port = this.form.port
                            this.connectInfo.database = this.form.database
                            this.dialogVisible = false
                            // 将这一部分的信息持久化
                            localStorage.setItem("info", JSON.stringify(this.connectInfo))
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    }
                )
            },
            // 查看连接信息
            viewConnectInfo: function () {
                this.connectFlag = true
                var info = localStorage.getItem("info");
                if (info) {
                    this.connectInfo = JSON.parse(info)
                } else {
                    this.$message.error("未找到连接")
                }
            },
            // 进行搜索
            doSearch() {
                this.search.key = JSON.parse(localStorage.getItem("info"))['key']
                this.search.database = JSON.parse(localStorage.getItem("info"))['database']
                axios.post('/baseQuery', this.search).then(res => {
                    if (res.data.success) {
                        this.tableData = res.data.data.data
                        this.total = res.data.data.total
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            },
            // 重新连接
            resetConnect() {
                axios.post('/reset', this.connectInfo).then(res => {
                    if (res.data.success) {
                        this.$message.success("重连接成功")
                    } else {
                        this.$message.error("重连接失败")
                    }
                })
            },
            // 切换页码
            pageChange(page) {
                this.search.offset = page
                this.doSearch()
            },
            // 重置搜索条件
            resetList() {
                this.tableData = []
                this.search.offset = 1
                this.search.tagName = ''
                this.search.startDate = ''
                this.search.endDate = ''
                this.total = 0
            },
            addExcleList() {
                if (this.search.tagName == null || this.search.tagName.length == 0) {
                    this.$message.error("请输入导出的测点")
                    return;
                }
                if (this.excleList.includes(this.search.tagName)) {
                    this.$message.error("已经在导出列表之中了")
                    return;
                }
                this.excleList.push(this.search.tagName)
                this.$message.success("成功加入导出列表")
            },
            // 导出弹出层
            openExportDialog() {
                this.exportFlag = true;
            },
            // 删除index
            delItem(index, tag) {
                this.$confirm('是否要删除该项?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.excleList.splice(index, 1)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 导出确认
            exportOk() {
                this.excleParam.tagNames = this.excleList
                this.excleParam.key = JSON.parse(localStorage.getItem("info"))['key']
                this.excleParam.database = JSON.parse(localStorage.getItem("info"))['database']
                // 发送数据,下载excle
                axios({
                    url: 'excle',
                    method: 'post',
                    responseType: 'blob',
                    data : this.excleParam // important
                }).then((response) => {
                    if (response.status == 200) {
                        let url = window.URL.createObjectURL(new Blob([response.data]))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', new Date().getTime() + ".xls")    // 自定义下载文件名（如exemple.txt）
                        document.body.appendChild(link)
                        link.click()
                    }
                });
            }
        }
    })
</script>
</body>
</html>
